<template>
  <umrp-container padding="16px" :gap="24">
    <umrp-container>
      <umrp-input placeholder="输入文章标题搜索"></umrp-input>
    </umrp-container>
    <h3>基本使用</h3>
    <umrp-row :gutter="16">
      <umrp-col :span="4" v-for="_ in 6">
        <umrp-card>
          <template #cover>
            <umrp-image :height="160"></umrp-image>
          </template>
          <template #body>
            <umrp-container padding="10px" :gap="10">
              <umrp-text>文章标题</umrp-text>
              <umrp-text color="secondary">文章描述</umrp-text>
            </umrp-container>
          </template>
        </umrp-card>
      </umrp-col>
    </umrp-row>
    <h3>家族图谱</h3>
    <umrp-row :gutter="16">
      <umrp-col :span="4" v-for="_ in 6">
        <umrp-card>
          <template #cover>
            <umrp-image :height="160"></umrp-image>
          </template>
          <template #body>
            <umrp-container padding="10px" :gap="10">
              <umrp-text>文章标题</umrp-text>
              <umrp-text color="secondary">文章描述</umrp-text>
            </umrp-container>
          </template>
        </umrp-card>
      </umrp-col>
    </umrp-row>
    <h3>信箱使用</h3>
    <umrp-row :gutter="16">
      <umrp-col :span="4" v-for="_ in 6">
        <umrp-card>
          <template #cover>
            <umrp-image :height="160"></umrp-image>
          </template>
          <template #body>
            <umrp-container padding="10px" :gap="10">
              <umrp-text>文章标题</umrp-text>
              <umrp-text color="secondary">文章描述</umrp-text>
            </umrp-container>
          </template>
        </umrp-card>
      </umrp-col>
    </umrp-row>
  </umrp-container>
</template>
